window.addEventListener('load', () => {
    const main = document.querySelector('.main');
    const rangeInput = document.querySelector('#range');
    const percentage = document.querySelector('#percentage');
    const light = (number) => {
        for (let i = 0; i < main.children.length; i++) {
            const block = main.children[i];

            if (i < number) {
                block.style.setProperty('--bg', `hsl(${i / 100 * 360}, 100%, 50%)`);
                block.style.setProperty('--sg', `hsl(${i / 100 * 360}, 100%, 50%)`);
            } else {
                block.style.setProperty('--bg', 'black')
                block.style.setProperty('--sg', 'transparent')
            }
        }
    }

    for (let i = 0; i < 100; i++) {
        const span = document.createElement('span');
        span.style.transform = `rotate(${i / 100 * 360}deg)`;
        main.appendChild(span);
    }

    rangeInput.addEventListener('input', () => {
        rangeInput.style.backgroundSize = `${rangeInput.value }% 100%`;
        percentage.innerHTML = `${rangeInput.value}%`;
        light(rangeInput.value);
    });
});